<template>
    <div class="app-edit">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="form.name" placeholder="请输入姓名" />
                            </el-form-item>
                            <el-form-item label="性别" prop="xb">
                                <el-select v-model="form.xb" placeholder="请选择性别">
                                    <el-option
                                            v-for="dict in dict.type.sys_user_sex"
                                            :key="dict.value"
                                            :label="dict.label"
                                            :value="dict.value"

                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="下拉选择">
                                <el-radio-group v-model="form.xlx">
                                    <el-radio
                                            v-for="dict in dict.type.sys_yes_no"
                                            :key="dict.value"
:label="dict.value"
                                    >{{dict.label}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="平铺选">
                                <el-checkbox-group v-model="form.pbx">
                                    <el-checkbox
                                            v-for="dict in dict.type.sys_show_hide"
                                            :key="dict.value"
                                            :label="dict.value">
                                        {{dict.label}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="文件上传">
                                <file-upload v-model="form.fileId"/>
                            </el-form-item>
                            <el-form-item label="图片上传">
                                <image-upload v-model="form.picId"/>
                            </el-form-item>
                            <el-form-item label="日期" prop="accTime">
                                <el-date-picker clearable size="small"
                                                v-model="form.accTime"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="备注" prop="memo">
                                <el-input v-model="form.memo" type="textarea" placeholder="请输入内容" />
                            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>

<script>
    import { listTestDemo, getTestDemo, delTestDemo, addTestDemo, updateTestDemo } from "@/api/test/testDemo";

    export default {
        name: "TestDemoEle",
            dicts: ['sys_yes_no', 'sys_user_sex', 'sys_show_hide'],
        props:{
            id:{
                type:String,
                default:undefined
            },
            // 弹出层标题
            title:{
                type:String,
                default:undefined
            },
            // 是否显示弹出层
            open: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // demo测试表格数据
                    testDemoList: [],

                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: null,
                    xb: null,
                    xlx: null,
                    pbx: null,
                    fileId: null,
                    picId: null,
                    accTime: null,
                    memo: null,
        },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
        },
        created() {},
        watch: {
            open: {
                handler(val) {
                    if (val) {
                        if(this.id){
                            this.handleInit();
                        }
                    } else {
                        this.reset();
                    }
                },
                immediate: true,
                deep: true,
            },
        },
        methods: {
            /** 查询demo测试列表 */
            // 取消按钮
            cancel() {
                this.$emit("cancel")
            },
            // 表单重置
            reset() {
                this.form = {
                        id: null,
                        name: null,
                        xb: null,
                        xlx: "0",
                        pbx: [],
                        fileId: null,
                        picId: null,
                        accTime: null,
                        memo: null,
                        createBy: null,
                        createTime: null,
                        updateBy: null,
                        updateTime: null
            };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 修改按钮操作 */
            handleInit() {
                getTestDemo(this.id).then(response => {
                    this.form = response.data;
                            this.form.pbx = this.form.pbx.split(",");
                    this.open = true;
                    // this.title = "修改demo测试";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.form.pbx = this.form.pbx.join(",");
                        if (this.form.id != null) {
                            updateTestDemo(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.$emit("submit")
                            });
                        } else {
                            addTestDemo(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.$emit("submit")
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除demo测试编号为"' + ids + '"的数据项？').then(function() {
                    return delTestDemo(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },

    }
    };
</script>
<style lang="scss" scoped>
</style>
